import 'dart:async';
import 'dart:io';
import 'dart:ui';

import 'package:flutter/animation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

import 'dart:math' as math;

import 'package:flutter_widgets/Widgets/animated_list.dart';
import 'package:flutter_widgets/Widgets/automatic_+notch_shape_page.dart';
import 'package:flutter_widgets/Widgets/automatic_keep_live_page.dart';
import 'package:flutter_widgets/Widgets/custom_multi_child_layout.dart';
import 'package:flutter_widgets/Widgets/custom_scroll_view.dart';
import 'package:flutter_widgets/Widgets/editable_text_page.dart';
import 'package:flutter_widgets/Widgets/flex.dart';
import 'package:flutter_widgets/Widgets/flow_page.dart';
import 'package:flutter_widgets/Widgets/focus_page.dart';
import 'package:flutter_widgets/Widgets/glowing_overscroll_indicator_page.dart';
import 'package:flutter_widgets/Widgets/gridview.dart';
import 'package:flutter_widgets/Widgets/hero.dart';
import 'package:flutter_widgets/Widgets/inline_span.dart';
import 'package:flutter_widgets/Widgets/interval.dart';
import 'package:flutter_widgets/Widgets/list_view.dart';
import 'package:flutter_widgets/Widgets/list_wheel_scroll_view.dart';
import 'package:flutter_widgets/Widgets/nested_scrollview.dart';
import 'package:flutter_widgets/Widgets/notification.dart';
import 'package:flutter_widgets/Widgets/over_lay.dart';
import 'package:flutter_widgets/Widgets/primary_scroll_controller.dart';
import 'package:flutter_widgets/Widgets/will_pop_scop.dart';
import 'package:path_provider/path_provider.dart';

import 'annotated_region.dart';
import 'draggable_scrollable_sheet_page.dart';

class WidgetsList extends StatefulWidget {
  WidgetsList({Key key}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return WidgetsListState();
  }
}

class WidgetsListState extends State<WidgetsList>
    with TickerProviderStateMixin {
  bool _openAll = false;
  AnimationController controller;
  Animation<AlignmentGeometry> animation;
  double animatedAlignChangeValue = -0.5;
  bool animateBool = false;
  GlobalKey<AnimatedListState> animatedListKey = GlobalKey<AnimatedListState>();
  List<String> _data = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];
  LayerLink layerLink = LayerLink();
  Animation<Decoration> decorationAnimation;
  Animation<TextStyle> textStyleAnimation;
  Animation<RelativeRect> rectAnimation;
  File imageFile;
  PointerEvent _event;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // 创建 AnimationController 对象
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    // 通过 Tween 对象 创建 Animation 对象
    animation = AlignmentGeometryTween(
            begin: Alignment.bottomRight, end: Alignment.topLeft)
        .animate(controller)
          ..addListener(() {
            // 注意：这句不能少，否则 widget 不会重绘，也就看不到动画效果
            setState(() {});
          });
    decorationAnimation = DecorationTween(
            begin: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(0.0)),
                color: Colors.red),
            end: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20.0)),
                color: Colors.green))
        .animate(controller);
    textStyleAnimation = TextStyleTween(
            begin: TextStyle(color: Colors.yellow, backgroundColor: Colors.red),
            end: TextStyle(
                backgroundColor: Colors.green, color: Colors.lightBlue))
        .animate(controller);
    rectAnimation = RelativeRectTween(
            begin: RelativeRect.fromLTRB(0.0, 0.0, 100.0, 80.0),
            end: RelativeRect.fromLTRB(100.0, 50.0, 20.0, 20.0))
        .animate(controller);
  }

  void startAlignmentGeometryTweenAnimation() {
    // 执行动画
    controller.status == AnimationStatus.completed
        ? controller.reverse()
        : controller.forward();
  }

  void startDecorationAnimation() {
    decorationAnimation.status == AnimationStatus.completed
        ? controller.reverse()
        : controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    String _lastUpdateAllTime = PageStorage.of(context)?.readState(context) ??
        DateTime.now().toIso8601String();
    if (PageStorage.of(context)?.readState(context) == null) {
      PageStorage.of(context)?.writeState(context, _lastUpdateAllTime);
    } else if (_lastUpdateAllTime.contains('open')) {
      _openAll = true;
    }

    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        leading: Container(
          child: RaisedButton(
            child: Text('关闭'),
            onPressed: () {
              setState(() {
                PageStorage.of(context)
                    ?.writeState(context, DateTime.now().toIso8601String());
                _openAll = false;
              });
            },
          ),
        ),
        actions: <Widget>[
          RaisedButton(
            child: Text('打开'),
            onPressed: () {
              setState(() {
                PageStorage.of(context)?.writeState(
                    context, DateTime.now().toIso8601String() + 'open');
                _openAll = true;
              });
            },
          ),
        ],
      ),
      body: ListView(
        key: PageStorageKey(_lastUpdateAllTime),
        children: <Widget>[
          ExpansionTile(
            key: PageStorageKey('AbsorbPointer'),
            initiallyExpanded: _openAll,
            title: Text('AbsorbPointer'),
            children: <Widget>[
              Text(
                  '''When absorbing is true, this widget prevents its subtree from receiving pointer events by terminating hit testing at itself\nabsorbing设置为true的时候禁止子树接受触摸事件'''),
              Row(
                children: <Widget>[
                  RaisedButton(
                    color: Colors.red,
                    child: Text('普通RaisedButton'),
                    onPressed: () {
                      print('i am being click');
                    },
                  ),
                  Expanded(
                    flex: 1,
                    child: SizedBox(),
                  ),
                  AbsorbPointer(
                    absorbing: true,
                    child: RaisedButton(
                      color: Colors.red,
                      child: Text('AbsorbPointer中的RaisedButton'),
                      onPressed: () {
                        print('i am being click');
                      },
                    ),
                  )
                ],
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Align'),
            initiallyExpanded: _openAll,
            title: Text('Align'),
            children: <Widget>[
              Text(
                  '''A widget that aligns its child within itself and optionally sizes itself based on the child's size.\n可以使用Alignment(0.2, 0.6)设置详细偏移'''),
              Container(
                color: Colors.red,
                height: 50,
                child: Align(
                  alignment: Alignment.bottomRight,
                  child: Text('Align Text bottomRight'),
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AlignmentDirectional'),
            initiallyExpanded: _openAll,
            title: Text('AlignmentDirectional'),
            children: <Widget>[
              Text(
                  '''AlignmentDirectional和Aligment类似，但是end和start由TextDirection确定，如下例子就是
                  textDirection: TextDirection.rtl 
                  AlignmentDirectional.bottomEnd'''),
              Container(
                color: Colors.red,
                height: 50,
                child: Directionality(
                  child: Align(
                    alignment: AlignmentDirectional.bottomEnd,
                    child: Text(
                      'Align Text bottomEnd',
                    ),
                  ),
                  textDirection: TextDirection.rtl,
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AlignmentGeometryTween'),
            initiallyExpanded: _openAll,
            title: Text('AlignmentGeometryTween'),
            children: <Widget>[
              Text(
                  '''两个AlignmentGeometry之间的插值。此类专门用于插补Tween <AlignmentGeometry> 以适合对齐。'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () => startAlignmentGeometryTweenAnimation(),
              ),
              Container(
                color: Colors.red,
                height: 50,
                child: Align(
                  alignment: animation.value,
                  child: Text('Align Text bottomRight'),
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AlignmentTween'),
            initiallyExpanded: _openAll,
            title: Text('AlignmentTween'),
            children: <Widget>[
              Text('''与AlignmentGeometryTween类似，不过动画变化的是Aligment'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AlignTransition'),
            initiallyExpanded: _openAll,
            title: Text('AlignTransition'),
            children: <Widget>[
              Text('''AlignmentGeometry的动画，但是不是匀速的，是中间快，两头慢'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () => startAlignmentGeometryTweenAnimation(),
              ),
              AlignTransition(
                alignment: animation,
                child: Text('AlignTransition'),
                heightFactor: 3,
                widthFactor: 10,
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AlwaysScrollableScrollPhysics'),
            initiallyExpanded: _openAll,
            title: Text('AlwaysScrollableScrollPhysics'),
            children: <Widget>[
              Text(
                  '''ScrollView有个ScrollPhysics physics参数,默认AlwaysScrollableScrollPhysics，总是允许用户滚动'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AlwaysStoppedAnimation'),
            initiallyExpanded: _openAll,
            title: Text('AlwaysStoppedAnimation'),
            children: <Widget>[
              Text('''始终以给定�����停止的动画。实质就是以Animation的形式包装一个值，如下面进度条的红色'''),
              CircularProgressIndicator(
                backgroundColor: Colors.yellow,
                value: 0.2,
                valueColor: const AlwaysStoppedAnimation<Color>(Colors.red),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Animatable'),
            initiallyExpanded: _openAll,
            title: Text('Animatable'),
            children: <Widget>[
              Text(
                  '''以Animation作为输入，可以提供指定类型值。Animatable抽象类将双精度值映射为特定类型的值。Animatable的主要子类是Tween'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedAlign'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedAlign'),
            children: <Widget>[
              Text('''Align的动画版本，只要给定的对齐alignment:发生变化，就会在给定持续时间内自动转换孩子的位置。'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animatedAlignChangeValue =
                        animatedAlignChangeValue < 0 ? 0.5 : -0.5;
                  });
                },
              ),
              Container(
                height: 50,
                child: AnimatedAlign(
                  alignment: Alignment(
                      animatedAlignChangeValue, animatedAlignChangeValue),
                  duration: Duration(milliseconds: 2000),
                  child: Text('AnimatedAlign'),
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedBuilder'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedBuilder'),
            children: <Widget>[
              Text(
                  '''实质就是监听Animation，当animation的值变化的时候就调用AnimatedBuilder的setState方法，然后在build方法中调用builder
              如果您将预先构建的子树传递给child参数，AnimatedBuilder会将其传递回builder函数，以便您可以将其合并到构建中，免得每次都重建'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    startAlignmentGeometryTweenAnimation();
                  });
                },
              ),
              AnimatedBuilder(
                child: Text('AmimatedBuilder'),
                animation: controller,
                builder: (BuildContext context, Widget child) {
                  return Transform.rotate(
                    angle: controller.value * 2.0 * math.pi,
                    child: child,
                  );
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedContainer'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedContainer'),
            children: <Widget>[
              Text('''AnimatedContainer所有参数如宽高颜色和外形等改变时都以动画的形式实现'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    startAlignmentGeometryTweenAnimation();
                  });
                },
              ),
              Container(
                alignment: Alignment.center,
                height: 80,
                width: 300,
                child: AnimatedContainer(
                  alignment: Alignment.center,
                  width: controller.value * 160 + 20,
                  height: 20 + 60 * controller.value,
                  color: Color.fromRGBO(
                      (controller.value * 55).toInt() + 200,
                      (controller.value * 200).toInt(),
                      (controller.value * 255).toInt(),
                      1),
                  child: Text('AnimatedContainer'),
                  duration: Duration(milliseconds: 200),
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedCrossFade'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedCrossFade'),
            children: <Widget>[
              Text(
                  '''AnimatedCrossFade在两个给定的widget之间交叉淡化，并设置动画。动画通过crossFadeState参数控制，当该参数变化时自动执行动画。'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedCrossFade(
                duration: const Duration(milliseconds: 500),
                firstChild: const Text('first child'),
                secondChild: const Text('second child'),
                crossFadeState: animateBool
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedDefaultTextStyle'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedDefaultTextStyle'),
            children: <Widget>[
              Text(
                  '''DefaultTextStyle的动画版本，无论何时给定的样式发生更改，都会在给定的持续时间内自动转换默认文本样���（文本样式以应用于没有显式样式的后代Text小部件）。'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedDefaultTextStyle(
                child: Text('AnimatedDefaultTextStyle'),
                duration: Duration(milliseconds: 500),
                style: animateBool
                    ? TextStyle(color: Colors.red, fontSize: 20)
                    : TextStyle(color: Colors.green, fontSize: 40),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedList'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedList'),
            children: <Widget>[
              Text(
                  '''一个滚动容器，可在插入或移除项目时为其设置动画。实质上动画是每个cell上设置的，cel上的动画的animation是AnimatedList传递过来的。插入的时候是animation的forward，删除的时候是animation的reverse'''),
              RaisedButton(
                child: Text('跳转到示例'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (BuildContext context) =>
                              AnimatedListPage()));
                },
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedModalBarrier'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedModalBarrier'),
            children: <Widget>[
              Text('''一个小部件，可防止用户与自身后面的小部���交互，并可使用动画颜色值进行配���。'''),
              Container(
                height: 50,
                child: Stack(
                  children: <Widget>[
                    RaisedButton(
                      onPressed: () {},
                      child: Text('点不到这个按钮'),
                    ),
                    Opacity(
                      child: AnimatedModalBarrier(
                        color: AlwaysStoppedAnimation(Colors.grey),
                        dismissible: false,
                      ),
                      opacity: 0.3,
                    ),
                    CircularProgressIndicator(),
                  ],
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedOpacity'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedOpacity'),
            children: <Widget>[
              Text(
                  '''不透明度的动画版本，只要给定的不透明度发生变化，就会自动转换孩子在给定持续时间内的不透明度。动画不透明度相对昂贵，因为它需要将子画面绘制到中间缓冲区中。'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedOpacity(
                child: Center(
                  child: Text('AnimatedOpacity'),
                ),
                duration: Duration(milliseconds: 1000),
                opacity: animateBool ? 0.1 : 1,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedPadding'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedPadding'),
            children: <Widget>[
              Text('''Padding的动画版本，无论何时给定的插入更改，它都会在给定的持续时间内自动转换缩进。'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              Container(
                height: 50,
                color: Colors.red,
                child: AnimatedPadding(
                  child: Container(
                    color: Colors.green,
                  ),
                  duration: Duration(milliseconds: 1000),
                  padding:
                      animateBool ? EdgeInsets.all(10) : EdgeInsets.all(20),
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedPhysicalModel'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedPhysicalModel'),
            children: <Widget>[
              Text('''PhysicalModel的动画版本。borderRadius和elevation可以动画.'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              Container(
                height: 50,
                color: Colors.red,
                child: AnimatedPhysicalModel(
                  child: Text('AnimatedPhysicalModel'),
                  duration: Duration(milliseconds: 1000),
                  color: Colors.red,
                  elevation: animateBool ? 3 : 1,
                  shadowColor: Colors.yellow,
                  shape: BoxShape.circle,
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedPositioned'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedPositioned'),
            children: <Widget>[
              Text(
                  '''Positioned的动画版本，可在给定位置发生变化时自动在给定持续时间内转子widget的位置。只当AnimatedPositioned是Stack的子widget时起效'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              Container(
                height: 50,
                child: Stack(
                  children: <Widget>[
                    AnimatedPositioned(
                      left: animateBool ? 0 : 100,
                      top: animateBool ? 0 : 20,
                      child: Text('AnimatedPositioned'),
                      duration: Duration(milliseconds: 500),
                    ),
                  ],
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedPositionedDirectional'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedPositionedDirectional'),
            children: <Widget>[
              Text(
                  '''PositionedDirectional的动画版本，可在给定位置发生变化时自动转换孩子在给定持续时间内的位置。只有当它是Stack的子元素时才有效. 与AnimatedPositioned相比只是将left和right换成start和end而已。'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              Container(
                height: 50,
                child: Stack(
                  children: <Widget>[
                    AnimatedPositionedDirectional(
                      start: animateBool ? 0 : 100,
                      top: animateBool ? 0 : 20,
                      child: Text('AnimatedPositionedDirectional'),
                      duration: Duration(milliseconds: 500),
                    ),
                  ],
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedSize'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedSize'),
            children: <Widget>[
              Text('''动画小部件，只要给定的子widget的大小发生变化，就会在给定的持续时间内自动转换大小。'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedSize(
                child: animateBool
                    ? Container(height: 10, color: Colors.red)
                    : Container(
                        height: 50,
                        color: Colors.green,
                      ),
                duration: Duration(milliseconds: 500),
                vsync: this,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedSwitcher'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedSwitcher'),
            children: <Widget>[
              Text(
                  '''默认情况下，AnimatedSwitcher在新子widget和旧的子widget之间执行FadeTransition。也可以在transitionBuilder: 中设置自定义动画，transitionBuilder: 中的animation会在显示的��候执行forward，在消失的时候执行reverse.如果“new”���������节点与“旧”子����点�����有相同的widget类型和键，但具有不���的参数，则AnimatedSwitcher将不会在它们之间进�����转换'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedSwitcher(
                duration: const Duration(milliseconds: 2000),
                transitionBuilder: (Widget child, Animation<double> animation) {
                  return ScaleTransition(child: child, scale: animation);
                },
                child: Text(
                  'AnimatedSwitcher' + animateBool.toString(),
                  key: ValueKey<bool>(animateBool),
                  style: Theme.of(context).textTheme.display1,
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedWidget'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedWidget'),
            children: <Widget>[
              Text(
                  '''在给定的Listenable更改值时重建AnimatedWidget自身。Animation也是Listenable子类'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    startAlignmentGeometryTweenAnimation();
                  });
                },
              ),
              SpinningContainer(
                controller: controller,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimatedWidgetBaseState'),
            initiallyExpanded: _openAll,
            title: Text('AnimatedWidgetBaseState'),
            children: <Widget>[
              Text(
                  '''具有隐式动画的小部件的基类，需要在动画运行时重建其小部件树。子类必须实现forEachTween方法。实质原理就是在forEachTween方法中实现通过旧值生成begin，新值生成end得到一个tween，然后在build方法中通过tween.evaluate(animation)获取变化的值修改子widget.'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedCount(
                count: animateBool ? 10 : 100,
                curve: Curves.ease,
                duration: Duration(seconds: 1),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Animation'),
            initiallyExpanded: _openAll,
            title: Text('Animation'),
            children: <Widget>[
              Text(
                  '''Animation 抽象类提供给定类型的值、动画方向的概念和动画状态和一个监听器接口，这个监听器接口用来注册值或状态的改变时被调用的回调。
'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimationController'),
            initiallyExpanded: _openAll,
            title: Text('AnimationController'),
            children: <Widget>[
              Text('''AnimationController extends Animation
该类允许您执行以下任务：
1、向前或向后播放动画，或停止动画。
2、将动画设置为特定值。
3、定义动画的upperBound和lowerBound值。
4、使用物理模拟器创建fling（掷，抛）动画效果。
默认情况下，AnimationController在给定的持续时间内线性生成范围从0.0到1.0的值。只要运行应用程序的设备准备好显示新帧（通常，此速率大约为每秒60个值），动画控制器就会生成一个新值。

如果从State创建AnimationController，则State可以使用TickerProviderStateMixin和SingleTickerProviderStateMixin 类来实现TickerProvider接口

应该在State.dispose中dispose
'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnimationMax、AnimationMean、AnimationMin'),
            initiallyExpanded: _openAll,
            title: Text('AnimationMax'),
            children: <Widget>[
              Text(
                  '''都是Animation的子类，其value分别是传递进去的两个Animation的value中的较大值、平均值、较小值'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AnnotatedRegion'),
            initiallyExpanded: _openAll,
            title: Text('AnnotatedRegion'),
            children: <Widget>[
              Text(
                  '''根据stackoverflow上别人的理解，这个小部件会自动设置包含在其中的小部件被状态栏/导航栏覆盖时的状态栏/导航栏颜色。'''),
              RaisedButton(
                child: Text('跳转到示例,状态条字体颜色是黑色'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (BuildContext context) =>
                              AnnotatedRegionDemo()));
                },
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AspectRatio'),
            initiallyExpanded: _openAll,
            title: Text('AspectRatio'),
            children: <Widget>[
              Text('''尝试将子项调整为特定宽高比的小部件。
小部件首先尝试布局约束所允许的最大宽度。通过将给定的宽高比应用于宽度来确定小部件的高度，表示为宽度与高度的比率。如果布局约束允许，则按设定的宽高比设置子widget（过程中可能会因宽或高不满足而调整子widget大小），如果布局约束不允许，则按布局约束设置子widget大小'''),
              AspectRatio(
                aspectRatio: 2,
                child: Container(
                  color: Colors.red,
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AssetBundleImageKey'),
            initiallyExpanded: _openAll,
            title: Text('AssetBundleImageKey'),
            children: <Widget>[
              Text(
                  '''由AssetImage或ExactAssetImage���取的图像的键。这用于标识imageCache中的精确资源。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AssetBundleImageProvider'),
            initiallyExpanded: _openAll,
            title: Text('AssetBundleImageProvider'),
            children: <Widget>[
              Text('''ImageProvider的一个子类，它知道AssetBundle。
这会影响基于AssetBundle的ImageProvider 类的通用���辑，从而简化了子类必须实现的只���������������������������gainKey。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AssetImage'),
            initiallyExpanded: _openAll,
            title: Text('AssetImage'),
            children: <Widget>[
              Text(
                  '''从AssetBundle获取图像，根据context确定要使用的确切图像。AssetBundleImageProvider子类。'''),
              Container(
                  height: 60,
                  child: Image(
                    image: AssetImage('lib/Resource/111.png'),
                  )),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AutomaticKeepAlive'),
            initiallyExpanded: _openAll,
            title: Text('AutomaticKeepAlive'),
            children: <Widget>[
              Text(
                  '''AutomaticKeepAlive可以让子树的派生的逻辑控制是否需要缓存该子树。AutomaticKeepAlive派生类通常使用AutomaticKeepAliveClientMixin发信号通知它保持活动状态，然后实现wantKeepAlive getter并调用updateKeepAlive。'''),
              RaisedButton(
                child: Text('跳转到示例'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (BuildContext context) =>
                              AutomaticKeepAlivePage()));
                },
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('AutomaticNotchedShape'),
            initiallyExpanded: _openAll,
            title: Text('AutomaticNotchedShape'),
            children: <Widget>[
              Text(
                  '''通过ShapeBorder创建NotchedShape（Notch是凹口的意思）,AutomaticNotchedShape可以分别设置嵌入和被嵌入组建的外形'''),
              RaisedButton(
                child: Text('跳转到示例'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (BuildContext context) =>
                              AutomaticNotchShapePage()));
                },
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BackdropFilter'),
            initiallyExpanded: _openAll,
            title: Text('BackdropFilter'),
            children: <Widget>[
              Text(
                  '''一个小部件，它将过滤器应用于现有的绘制内容(则BackdropFilter下面的内容)，然后绘制子项（BackdropFilter的child不受过滤影响）。'''),
              Stack(
                // fit: StackFit.expand,
                children: <Widget>[
                  Center(
                    child: Container(
                      height: 200,
                      child: Image(
                        image: AssetImage('lib/Resource/111.png'),
                      ),
                    ),
                  ),
                  Center(
                    child: ClipRect(
                      // <-- clips to the 200x200 [Container] below
                      child: BackdropFilter(
                        filter: ImageFilter.blur(
                          sigmaX: 5.0,
                          sigmaY: 5.0,
                        ),
                        child: Container(
                          alignment: Alignment.center,
                          width: 200.0,
                          height: 200.0,
                          child: Text(
                            'Hello World',
                            style: TextStyle(
                              backgroundColor: Colors.red,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BallisticScrollActivity'),
            initiallyExpanded: _openAll,
            title: Text('BallisticScrollActivity'),
            children: <Widget>[
              Text('''基于Simulation处理ScrollView动画的acitvity。ScrollActivity子类'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Banner'),
            initiallyExpanded: _openAll,
            title: Text('Banner'),
            children: <Widget>[
              Text('''基在另一个小部件的角落上方显示对角线消息。'''),
              Banner(
                child: Center(
                  child: Container(
                    height: 50,
                    color: Colors.green,
                  ),
                ),
                location: BannerLocation.topEnd,
                message: 'message',
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BannerPainter'),
            initiallyExpanded: _openAll,
            title: Text('BannerPainter'),
            children: <Widget>[
              Text(
                  '''Banner的内部实现用的就是CustomPain和BannerPainter，BannerPainter是CustomPainter子类'''),
              Container(
                height: 50,
                child: CustomPaint(
                  foregroundPainter: BannerPainter(
                    location: BannerLocation.topEnd,
                    message: 'message',
                    color: Colors.green,
                    layoutDirection: TextDirection.ltr,
                    textDirection: TextDirection.ltr,
                  ),
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Baseline'),
            initiallyExpanded: _openAll,
            title: Text('Baseline'),
            children: <Widget>[
              Text('''根据孩子的基线定位孩子的小部件。
此窗口小部件将子项向下移动，使子项的基线（或子项的底部，如果子项没有基线）是此框顶部下方的基线逻辑像素，
然后调整此框的大小以包含子项。如果基线小于从孩子的顶部到孩子的基线的距离，则孩子是顶部对齐的。下面蓝色部分不属于Baseline，是baseline顶部的Container'''),
              Container(
                height: 10,
                color: Colors.blue,
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      color: Colors.red,
                      child: Baseline(
                        child: Text('''1,TextBaseline.alphabetic'''),
                        baseline: 1,
                        baselineType: TextBaseline.alphabetic,
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.green,
                      child: Baseline(
                        child: Text('10,TextBaseline.ideographic'),
                        baseline: 10,
                        baselineType: TextBaseline.ideographic,
                      ),
                    ),
                  )
                ],
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BeveledRectangleBorder'),
            initiallyExpanded: _openAll,
            title: Text('BeveledRectangleBorder'),
            children: <Widget>[
              Text('''带有扁平或“斜角”角的矩形边框。是ShapeBorder的子类
              连接矩形四边的线段�����开始，并且位置偏移相应的边界半径，但不会远离边的中心。
              如果所有边界半径都超过边���半�����/高度，则所得到的形状是通���连接侧面的中心而制成的钻石。'''),
              RaisedButton(
                child: Text('���转���示���'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (BuildContext context) =>
                              AutomaticNotchShapePage()));
                },
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BlockSemantics'),
            initiallyExpanded: _openAll,
            title: Text('BlockSemantics'),
            children: <Widget>[
              Text('''一个窗口小部件，它删除在同一个语义容���中绘制在其之前的所有窗口小部件的语义。
              这对于隐藏在某个窗口小部件后面的小部件的交互非常有用，
              例如，警报通常应该禁止与位于警报“后面”的任何窗口小部件进行交互。
              如下面例子，点击文字部分覆盖部分不会传递给button'''),
              Stack(
                children: <Widget>[
                  RaisedButton(
                    child: Text('Button'),
                    onPressed: () {},
                  ),
                  BlockSemantics(
                    child: Text('BlockSemantics\nnext line'),
                    blocking: true,
                  ),
                ],
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Border'),
            initiallyExpanded: _openAll,
            title: Text('Border'),
            children: <Widget>[
              Text('''BoxBorder子类，边框，由四个边组成：顶部，右侧，底部，左侧。'''),
              Align(
                alignment: Alignment.center,
                child: Container(
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.yellow, width: 5)),
                  height: 30,
                  width: 100,
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BorderDirectional'),
            initiallyExpanded: _openAll,
            title: Text('BorderDirectional'),
            children: <Widget>[
              Text('''BoxBorder子类，和Border类似，但是左右基于读取方向变为start和end'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BorderRadius'),
            initiallyExpanded: _openAll,
            title: Text('BorderRadius'),
            children: <Widget>[
              Text('''用于设置圆角'''),
              Align(
                alignment: Alignment.center,
                child: Container(
                  decoration: BoxDecoration(
                      borderRadius:
                          BorderRadius.horizontal(left: Radius.circular(10)),
                      border: Border.all(color: Colors.red, width: 1)),
                  height: 30,
                  width: 100,
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BorderRadiusDirectional'),
            initiallyExpanded: _openAll,
            title: Text('BorderRadiusDirectional'),
            children: <Widget>[
              Text('''用于设置圆角，和BorderRadius类似，但是左右基于读取方向变为start和end'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BorderRadiusTween'),
            initiallyExpanded: _openAll,
            title: Text('BorderRadiusTween'),
            children: <Widget>[
              Text('''用两个BorderRadius之间的插值。Tween子类'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BorderSide'),
            initiallyExpanded: _openAll,
            title: Text('BorderSide'),
            children: <Widget>[
              Text('''盒子边框的一面,可以设置颜色、宽度、style'''),
              Align(
                alignment: Alignment.center,
                child: Container(
                  decoration: BoxDecoration(
                    border: Border(
                      left: BorderSide(
                          width: 5,
                          color: Colors.green,
                          style: BorderStyle.solid),
                      right: BorderSide(
                          width: 1,
                          color: Colors.yellow,
                          style: BorderStyle.solid),
                      bottom: BorderSide(
                          width: 1,
                          color: Colors.red,
                          style: BorderStyle.solid),
                      top: BorderSide(
                          width: 3,
                          color: Colors.purple,
                          style: BorderStyle.solid),
                    ),
                  ),
                  height: 30,
                  width: 100,
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BottomNavigationBarItem'),
            initiallyExpanded: _openAll,
            title: Text('BottomNavigationBarItem'),
            children: <Widget>[
              Text(
                  ''' material中的BottomNavigationBar或者iOS风格CupertinoTabBar中的按钮，有icon和title属性'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BouncingScrollPhysics'),
            initiallyExpanded: _openAll,
            title: Text('BouncingScrollPhysics'),
            children: <Widget>[
              Text('''ScrollPhysics子类，允许滚动偏移超出内容范围，但随后将内容反弹回这些边界的边缘。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BoxConstraints'),
            initiallyExpanded: _openAll,
            title: Text('BoxConstraints'),
            children: <Widget>[
              Text('''可以设置最大最小宽高'''),
              Container(
                child: Text('BoxConstraints(maxHeight: 50, maxWidth: 100)'),
                color: Colors.red,
                constraints: BoxConstraints(maxHeight: 50, maxWidth: 200),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BoxConstraintsTween'),
            initiallyExpanded: _openAll,
            title: Text('BoxConstraintsTween'),
            children: <Widget>[
              Text('''两个BoxConstraints之间的插值。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BoxDecoration'),
            initiallyExpanded: _openAll,
            title: Text('BoxDecoration'),
            children: <Widget>[
              Text('''关于如何绘制框的不可变描述。可设置边框、颜色渐变、背景图片、颜色混合模式等'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('BoxShadow'),
            initiallyExpanded: _openAll,
            title: Text('BoxShadow'),
            children: <Widget>[
              Text('''用于设置阴影'''),
              Align(
                alignment: Alignment.center,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.red, spreadRadius: 2, blurRadius: 2)
                    ],
                  ),
                  height: 30,
                  width: 100,
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Chip'),
            initiallyExpanded: _openAll,
            title: Text('Chip'),
            children: <Widget>[
              Text('一般用作商品或者一些东西的标签。'),
              Chip(
                avatar: CircleAvatar(
                    backgroundColor: Colors.blue.shade900, child: Text('AH')),
                label: Text('Hamilton'),
                deleteIcon: Icon(Icons.delete_forever),
                deleteIconColor: Colors.red,
                deleteButtonTooltipMessage: "删除该条",
                onDeleted: () {},
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('CircleBorder'),
            initiallyExpanded: _openAll,
            title: Text('CircleBorder'),
            children: <Widget>[
              Text('''ShapeBorder子类'''),
              RaisedButton(
                color: Colors.red,
                shape: CircleBorder(),
                onPressed: () {},
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('CircularNotchedRectangle'),
            initiallyExpanded: _openAll,
            title: Text('CircularNotchedRectangle'),
            children: <Widget>[
              Text('''NotchShape子类，一个带有原型凹陷的矩形。例如应用于floatbutton嵌入bottombar'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ClipOval'),
            initiallyExpanded: _openAll,
            title: Text('ClipOval'),
            children: <Widget>[
              Text('''使用椭圆剪辑其子项的小部件。'''),
              ClipOval(
                child: Text(
                  '  ClipOval  ',
                  style: TextStyle(backgroundColor: Colors.red),
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ClipPath'),
            initiallyExpanded: _openAll,
            title: Text('ClipPath'),
            children: <Widget>[
              Text('''使用路径剪辑其子项的窗口小部件。'''),
              ClipPath(
                clipper: TriangleClipper(),
                child: Container(
                  height: 50,
                  width: 100,
                  color: Colors.green,
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ClipRect'),
            initiallyExpanded: _openAll,
            title: Text('ClipRect'),
            children: <Widget>[
              Text('''使用矩形剪辑其子项的小部件。如下例子剪辑child的上半部'''),
              ClipRect(
                clipper: RectClipper(),
                child: Text(
                  'ClipRect',
                  style: TextStyle(color: Colors.red),
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ClipRRect'),
            initiallyExpanded: _openAll,
            title: Text('ClipRRect'),
            children: <Widget>[
              Text('''使用圆角矩形剪辑其子项的小部件。如下例子裁剪左上角'''),
              ClipRRect(
                borderRadius: BorderRadius.only(topLeft: Radius.circular(5)),
                child: Text(
                  'ClipRect',
                  style: TextStyle(backgroundColor: Colors.red),
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ColorTween'),
            initiallyExpanded: _openAll,
            title: Text('ColorTween'),
            children: <Widget>[
              Text('''两种颜色之间的插值'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Column'),
            initiallyExpanded: _openAll,
            title: Text('Column'),
            children: <Widget>[
              Text('''列'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('CompositedTransformFollower'),
            initiallyExpanded: _openAll,
            title: Text('CompositedTransformFollower'),
            children: <Widget>[
              Text(
                  '''一个遵循CompositedTransformTarget的小部件,当CompositedTransformFollower与CompositedTransformTarget的link参数相同时，
              CompositedTransformFollower将跟随CompositedTransformFollower的左边（则左上角），可以通过设置offset偏移'''),
              Container(
                height: 50,
                child: Stack(
                  children: <Widget>[
                    Positioned(
                      left: 10.0,
                      top: 10.0,
                      child: CompositedTransformTarget(
                        link: layerLink,
                        child: Container(
                          height: 20.0,
                          width: 20.0,
                          color: Colors.green,
                        ),
                      ),
                    ),
                    Positioned(
                      left: 5.0,
                      top: 5.0,
                      child: CompositedTransformFollower(
                        offset: Offset(6, 6),
                        link: layerLink,
                        child: Container(
                          height: 20.0,
                          width: 20.0,
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('CompoundAnimation'),
            initiallyExpanded: _openAll,
            title: Text('CompoundAnimation'),
            children: <Widget>[
              Text(
                  '''用于组合多个动画的界面。子类只需要实现value getter来控制子动画的组合方式。可以链接组合2个以上的动画。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ConstantTween'),
            initiallyExpanded: _openAll,
            title: Text('ConstantTween'),
            children: <Widget>[
              Text('''具有常量值的Tween,也就是会所begin和end相同的Tween'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ConstrainedBox'),
            initiallyExpanded: _openAll,
            title: Text('ConstrainedBox'),
            children: <Widget>[
              Text('''一个小部件，对其子级施加额外的约束。通过BoxConstraints设置约束.如下例子设置最大宽度50'''),
              ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 50),
                child: Text('ConstrainedBox'),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Container'),
            initiallyExpanded: _openAll,
            title: Text('Container'),
            children: <Widget>[
              Text(
                  '''可以设置的参数有alignment、padding、color、decoration、foregroundDecoration、width、height、constraints、margin、transform、child,'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ContinuousRectangleBorder'),
            initiallyExpanded: _openAll,
            title: Text('ContinuousRectangleBorder'),
            children: <Widget>[
              Text('''矩形边框，在直边和圆角之间具有平滑的连续过渡。'''),
              RaisedButton(
                color: Colors.red,
                onPressed: () {},
                shape: ContinuousRectangleBorder(
                    side: BorderSide(width: 5, color: Colors.green),
                    borderRadius: BorderRadius.all(Radius.circular(10))),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Cubic'),
            initiallyExpanded: _openAll,
            title: Text('Cubic'),
            children: <Widget>[
              Text('''单位区间的三次多项式映射。Curve的子类.该曲线类包含一些常用的三次曲线：
Curves.ease
Curves.easeIn
Curves.easeOut
Curves.easeInOut'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedCount(
                count: animateBool ? 10 : 100,
                curve: Cubic(0.1, 0.2, 0.3, 1),
                duration: Duration(seconds: 1),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Curve'),
            initiallyExpanded: _openAll,
            title: Text('Curve'),
            children: <Widget>[
              Text('''easing曲线用于调整动画随时间的变化率，允许它们加速和减速，而不是以恒定速率移动。
曲线必须映射t = 0.0到0.0和t = 1.0到1.0。'''),
              RaisedButton(
                color: Colors.red,
                onPressed: () {},
                shape: ContinuousRectangleBorder(
                    side: BorderSide(width: 5, color: Colors.green),
                    borderRadius: BorderRadius.all(Radius.circular(10))),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('CurveTween'),
            initiallyExpanded: _openAll,
            title: Text('CurveTween'),
            children: <Widget>[
              Text('''通过给定曲线转换给定动画的值。Animatable子类'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('CustomClipper'),
            initiallyExpanded: _openAll,
            title: Text('CustomClipper'),
            children: <Widget>[
              Text('''提供自定义���辑的界面。如下例子剪辑child的上半部'''),
              ClipRect(
                clipper: RectClipper(),
                child: Text(
                  'CustomClipper',
                  style: TextStyle(color: Colors.red),
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('CustomMultiChildLayout'),
            initiallyExpanded: _openAll,
            title: Text('CustomMultiChildLayout'),
            children: <Widget>[
              Text('''一个小部件，它使用委托来调整和定位多个子节点。'''),
              RaisedButton(child: Text('跳转到详情'), onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
                  return CustomMultiChildLayoutPage();
                }));
              },)
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('CustomPaint'),
            initiallyExpanded: _openAll,
            title: Text('CustomPaint'),
            children: <Widget>[
              Text('''一个小部件，提供在绘制阶段绘制的画布。'''),
              Container(
                height: 110,
                child: CustomPaint(
                  // painter: MyPainter(),
                  foregroundPainter: MyPainter(),
                  child: Text('hello customPaint'),
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('CustomScrollView'),
            initiallyExpanded: _openAll,
            title: Text('CustomScrollView'),
            children: <Widget>[
              Text(
                  '''一个使用slivers创建自定义滚动效果的ScrollView。CustomScrollView可以包含多个sliver类型列表'''),
              RaisedButton(
                child: Text('跳转到示例'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (BuildContext context) =>
                              CustomScrollViewPage()));
                },
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('DecoratedBox'),
            initiallyExpanded: _openAll,
            title: Text('DecoratedBox'),
            children: <Widget>[
              Text('''在child绘制之前或之后绘制DecoratedBox的小部件。'''),
              Container(
                height: 50,
                width: 50,
                child: DecoratedBox(
                  decoration: BoxDecoration(
                    gradient: RadialGradient(
                      center: const Alignment(-0.5, -0.6),
                      radius: 0.15,
                      colors: <Color>[
                        const Color(0xFFEEEEEE),
                        const Color(0xFF111133),
                      ],
                      stops: <double>[0.9, 1.0],
                    ),
                  ),
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('DecoratedBoxTransition'),
            initiallyExpanded: _openAll,
            title: Text('DecoratedBoxTransition'),
            children: <Widget>[
              Text(
                  '''动画版的DecoratedBox,动态修改DecoratedBoxTransition的Decoration属性。'''),
              RaisedButton(
                child: Text('开始动画'),
                onPressed: () {
                  setState(() {
                    startAlignmentGeometryTweenAnimation();
                  });
                },
              ),
              DecoratedBoxTransition(
                child: Text('hello'),
                decoration: decorationAnimation,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('DecorationImage'),
            initiallyExpanded: _openAll,
            title: Text('DecorationImage'),
            children: <Widget>[
              Text('''BoxDecoration有个image参数就是DecorationImage类型'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('DecorationImagePainter'),
            initiallyExpanded: _openAll,
            title: Text('DecorationImagePainter'),
            children: <Widget>[
              Text('''The painter for a DecorationImage.'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('DecorationTween'),
            initiallyExpanded: _openAll,
            title: Text('DecorationTween'),
            children: <Widget>[
              Text('''TDecorationTween的Tween版本'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('DefaultTextStyle'),
            initiallyExpanded: _openAll,
            title: Text('DefaultTextStyle'),
            children: <Widget>[
              Text(
                '''''',
              ),
              DefaultTextStyle(
                child: Text('hello,do not have style'),
                style: TextStyle(
                    backgroundColor: Colors.yellow, color: Colors.red),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('DefaultTextStyleTransition'),
            initiallyExpanded: _openAll,
            title: Text('DefaultTextStyleTransition'),
            children: <Widget>[
              Text(
                '''DefaultTextStyle的动画版本，用于动画其TextStyle的不同属性。''',
              ),
              RaisedButton(
                child: Text('开始动画'),
                onPressed: () {
                  setState(() {
                    startAlignmentGeometryTweenAnimation();
                  });
                },
              ),
              DefaultTextStyleTransition(
                child: Text('DefaultTextStyleTransition'),
                style: textStyleAnimation,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Directionality'),
            initiallyExpanded: _openAll,
            title: Text('Directionality'),
            children: <Widget>[
              Text(
                '''一个小部件，用于确定文本的方向性。如下所示设置为从有往左''',
              ),
              Directionality(
                child: Text(
                    'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello'),
                textDirection: TextDirection.rtl,
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Dismissible'),
            initiallyExpanded: _openAll,
            title: Text('Dismissible'),
            children: <Widget>[
              Text(
                '''可以通过在指示的方向上拖动来解除的小部件。如下例子绿�����������是��景。
                小部件在size为零（resizeDuration为非null）之后或在slide动画之后立即（resizeDuration为null）调用onDismissed回调。
                如果Dismissible是一个列表项，它必须有一个键区别于其他项，并且它的onDismissed回调必须从列表中删除该项。''',
              ),
              Visibility(
                visible: !animateBool,
                child: Dismissible(
                  child: Text('Dismissible'),
                  key: ValueKey('Dismissible'),
                  background: Container(
                    color: Colors.green,
                  ),
                  onDismissed: (dismissDirection) {
                    setState(() {
                      animateBool = !animateBool;
                    });
                  },
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Draggable'),
            initiallyExpanded: _openAll,
            title: Text('Draggable'),
            children: <Widget>[
              Text(
                '''可以拖动到DragTarget的小部件。有一个data选项可以传递数据到DragTarget''',
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Draggable(
                      child: Text('Draggable'),
                      feedback: Text('itis feedback'),
                      childWhenDragging: Text('正在拖动，如果不设置就保持child'),
                    ),
                  ),
                  Container(
                    color: Colors.green,
                    height: 50,
                    width: 100,
                    child: DragTarget<Color>(
                      builder: (BuildContext context, List candidateData,
                          List rejectedData) {
                        return Text('new Draggable');
                      },
                      onWillAccept: (color) {
                        return true;
                      },
                      onAccept: (color) {
                        print('hello');
                      },
                      onLeave: (color) {
                        print('leave');
                      },
                    ),
                  )
                ],
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('DraggableScrollableActuator'),
            initiallyExpanded: _openAll,
            title: Text('DraggableScrollableActuator'),
            children: <Widget>[
              Text(
                '''一个小部件，可以通知后代DraggableScrollableSheet它应该将其位置重置为初始状态。''',
              ),
              RaisedButton(
                child: Text('跳到示例详情'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (BuildContext context) =>
                              DraggableScrollableSheetPage()));
                },
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('DraggableScrollableSheet'),
            initiallyExpanded: _openAll,
            title: Text('DraggableScrollableSheet'),
            children: <Widget>[
              Text(
                '''Scrollable类型widget的容器，通过调整可滚动大小直到达到限制来响应拖动手势，然后滚动。效果是空出顶部一部分，scroll view整个页面滚动到一定位置之后内部的cell才会滚动''',
              ),
              RaisedButton(
                child: Text('跳到示例详情'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (BuildContext context) =>
                              DraggableScrollableSheetPage()));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('EdgeInsets'),
            initiallyExpanded: _openAll,
            title: Text('EdgeInsets'),
            children: <Widget>[
              Text(
                '''四个基本方向中每个方向的一组不可变的偏移量。''',
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('EdgeInsetsDirectional'),
            initiallyExpanded: _openAll,
            title: Text('EdgeInsetsDirectional'),
            children: <Widget>[
              Text(
                '''类似EdgeInsets，只是左右根据文本方向变成了start和end''',
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('EdgeInsetsGeometryTween'),
            initiallyExpanded: _openAll,
            title: Text('EdgeInsetsGeometryTween'),
            children: <Widget>[
              Text(
                '''EdgeInsets的Tween版本''',
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('EditableText'),
            initiallyExpanded: _openAll,
            title: Text('EditableText'),
            children: <Widget>[
              Text(
                '''不建议直接使用这个部件，建议使用TextField，TextField的build方法中使用的就是EditableText''',
              ),
              RaisedButton(
                child: Text('跳转到示例'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (BuildContext context) =>
                              EditableTextPage()));
                },
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ElasticInCurve'),
            initiallyExpanded: _openAll,
            title: Text('ElasticInCurve'),
            children: <Widget>[
              Text('''振荡曲线，在超出其范围时增大幅度。使用默认周期0.4的此类的实例可用作 Curves.elasticIn。'''),
              Container(
                height: 60,
                child: Image(
                  image: AssetImage('lib/Resource/ElasticInCurve.png'),
                ),
              ),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedCount(
                count: animateBool ? 10 : 100,
                curve: Curves.elasticIn,
                duration: Duration(seconds: 10),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ElasticInOutCurve'),
            initiallyExpanded: _openAll,
            title: Text('ElasticInOutCurve'),
            children: <Widget>[
              Text(
                  '''一条振荡曲线，在超出其范围时会增大然后收缩。使用默认周期0.4的此类的实例可用作 Curves.elasticInOut。'''),
              Container(
                height: 60,
                child: Image(
                  image: AssetImage('lib/Resource/ElasticInOutCurve.png'),
                ),
              ),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedCount(
                count: animateBool ? 10 : 100,
                curve: Curves.elasticInOut,
                duration: Duration(seconds: 10),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ElasticOutCurve'),
            initiallyExpanded: _openAll,
            title: Text('ElasticOutCurve'),
            children: <Widget>[
              Text(
                  '''一条振荡曲线，在超出其范围时会缩小幅度。使用默认周期0.4的此类的实例可用作 Curves.elasticOut。'''),
              Container(
                height: 60,
                child: Image(
                  image: AssetImage('lib/Resource/ElasticOutCurve.png'),
                ),
              ),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedCount(
                count: animateBool ? 10 : 100,
                curve: Curves.elasticOut,
                duration: Duration(seconds: 10),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ExactAssetImage'),
            initiallyExpanded: _openAll,
            title: Text('ExactAssetImage'),
            children: <Widget>[
              Text('''按设定比例scale显示图片，scale越大图片越小'''),
              Image(
                image: ExactAssetImage('lib/Resource/111.png', scale: 10),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Expanded'),
            initiallyExpanded: _openAll,
            title: Text('Expanded'),
            children: <Widget>[
              Text('''一个窗口小部件，用于展开Row，Column或Flex 的子项，以便子项填充可用空间。'''),
              Flex(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      color: Colors.green,
                      child: Text('占三分一空间'),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.red,
                      child: Text('占三分二空间'),
                    ),
                    flex: 2,
                  )
                ],
                direction: Axis.horizontal,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FadeInImage'),
            initiallyExpanded: _openAll,
            title: Text('FadeInImage'),
            children: <Widget>[
              Text('''在加载目标图像时显示占位符图像的图像，然后在加载时淡入新图像。
              如果图像同步发出ImageInfo，例如加载和缓存图像时，图像会立即显示，并且 永远不会显示占位符。'''),
              FadeInImage(
                placeholder: AssetImage('lib/Resource/111.png'),
                image: NetworkImage(
                    'http://pic37.nipic.com/20140113/8800276_184927469000_2.png'),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FadeTransition'),
            initiallyExpanded: _openAll,
            title: Text('FadeTransition'),
            children: <Widget>[
              Text('''动画小部件的不透明度'''),
              RaisedButton(
                child: Text('开启动画'),
                onPressed: () {
                  startAlignmentGeometryTweenAnimation();
                },
              ),
              FadeTransition(
                child: Text('FadeTransition'),
                opacity: controller,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FileImage'),
            initiallyExpanded: _openAll,
            title: Text('FileImage'),
            children: <Widget>[
              Text('''将给定的File对象解码为图像，将其与给定的比例相关联。ImageProvider子类'''),
              RaisedButton(
                child: Text('保存图片到本地，并用FileImage读取出来显示'),
                onPressed: () {
                  rootBundle
                      .load('lib/Resource/111.png')
                      .then((byteData) async {
                    Directory directory = await getTemporaryDirectory();
                    imageFile = File(directory.path + '/fileImage.png')
                      ..writeAsBytesSync(byteData.buffer.asUint8List(
                          byteData.offsetInBytes, byteData.lengthInBytes));
                    setState(() {});
                  });
                },
              ),
              imageFile != null
                  ? Image(
                      image: FileImage(imageFile),
                    )
                  : SizedBox(),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FittedBox'),
            initiallyExpanded: _openAll,
            title: Text('FittedBox'),
            children: <Widget>[
              Text(
                  '''根据合适的尺度对孩子进行缩放和定位。如下，左边是没有设置FittedBox的，右边设置FittedBox的fit为BoxFit.cover'''),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      height: 50,
                      child: Column(
                        children: <Widget>[
                          Container(
                            height: 45,
                            color: Colors.green,
                          ),
                          Text('FittedBox Bottom')
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      height: 50,
                      child: FittedBox(
                        fit: BoxFit.cover,
                        child: Column(
                          children: <Widget>[
                            Container(
                              height: 30,
                              color: Colors.red,
                            ),
                            Text('FittedBox Bottom')
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FittedSizes'),
            initiallyExpanded: _openAll,
            title: Text('FittedSizes'),
            children: <Widget>[
              Text(
                  '''applyBoxFit方法的返回值,如下applyBoxFit(BoxFit.cover, Size(5,10), Size(6,8)),返回的FittedSizes的source和destination的值如下'''),
              Text(
                  'source = ${applyBoxFit(BoxFit.cover, Size(5, 10), Size(6, 8)).source.toString()} destination = ${applyBoxFit(BoxFit.cover, Size(5, 10), Size(6, 8)).destination.toString()}')
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FixedColumnWidth'),
            initiallyExpanded: _openAll,
            title: Text('FixedColumnWidth'),
            children: <Widget>[
              Text(
                  '''将列的大小调整为特定数量的像素。这是确定列大小的最有效方法.TableColumnWidth的子类，用于设定Table的列宽'''),
              Table(
                columnWidths: const <int, TableColumnWidth>{
                  0: FixedColumnWidth(60),
                  1: FixedColumnWidth(100),
                },
                children: <TableRow>[
                  TableRow(children: <Widget>[
                    Container(
                      color: Colors.red,
                      child: Text('宽设置为60'),
                    ),
                    Container(
                      color: Colors.green,
                      child: Text('宽���置为100'),
                    )
                  ]),
                ],
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Flex'),
            initiallyExpanded: _openAll,
            title: Text('Flex'),
            children: <Widget>[
              Text('''在一维数组中显示其子项的窗口小部件。
              要使子项扩展以在 此窗口小部件主轴的方向上填充可用空间，请将子项包装在“Expanded”窗口小部件中。'''),
              RaisedButton(child: Text('跳转到详情'), onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => FlexPage()));
              },),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FlexColumnWidth'),
            initiallyExpanded: _openAll,
            title: Text('FlexColumnWidth'),
            children: <Widget>[
              Text('''确定其他列的宽之后，剩余空间根据FlexColumnWidth的value值按比例分配'''),
              Table(
                columnWidths: const <int, TableColumnWidth>{
                  0: FixedColumnWidth(60),
                  1: FlexColumnWidth(),
                  2: FlexColumnWidth(2),
                },
                children: <TableRow>[
                  TableRow(children: <Widget>[
                    Container(
                      color: Colors.red,
                      child: Text('宽设置为60'),
                    ),
                    Container(
                      color: Colors.green,
                      child: Text('FlexColumnWidth 1'),
                    ),
                    Container(
                      color: Colors.yellow,
                      child: Text('FlexColumnWidth 2'),
                    )
                  ]),
                ],
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FlowDelegate'),
            initiallyExpanded: _openAll,
            title: Text('FlowDelegate'),
            children: <Widget>[
              Text(
                  '''一个控制流布局外观的委托。可以使用动画构造FlowDelegate。子widget的位置在FlowDelegate的paintChildren方法中定义。性能比Wrap好'''),
              RaisedButton(
                child: Text(' 跳转到详情'),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (BuildContext context) {
                    return FlowPage();
                  }));
                },
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Focus'),
            initiallyExpanded: _openAll,
            title: Text('Focus'),
            children: <Widget>[
              Text(
                  '''一个管理FocusNode的小部件，允许将键盘焦点赋予此小部件及其后代。当焦点获得或失去时，onFocusChanged被调用'''),
              RaisedButton(
                child: Text('跳转到详情页面'),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => FocusPage()));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FocusAttachment'),
            initiallyExpanded: _openAll,
            title: Text('FocusAttachment'),
            children: <Widget>[
              Text('''此附件是通过调用FocusNode.attach创建的.其作用是将FocusNode附加到小部件树'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FocusManager'),
            initiallyExpanded: _openAll,
            title: Text('FocusManager'),
            children: <Widget>[
              Text(
                  '''管理focus树。FocusManager负责持有FocusScopeNode，FocusScopeNode是focus tree的根，并跟踪哪个FocusNode成为焦点。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FocusNode'),
            initiallyExpanded: _openAll,
            title: Text('FocusNode'),
            children: <Widget>[
              Text('''有状态窗口小部件可用于获取键盘焦点和处理键盘事件的对象。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Form'),
            initiallyExpanded: _openAll,
            title: Text('Form'),
            children: <Widget>[
              Text(
                  '''用于将多个表单字段小部件（例如TextField小部件）分组在一起的可选容器。每个单独的表单字段都应该包装在FormField小部件中，并将Form小部件作为所有这些小部件的共同祖先。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FormField'),
            initiallyExpanded: _openAll,
            title: Text('FormField'),
            children: <Widget>[
              Text('''单个表单字段。
此小组件维护表单字段的当前状态，以便在UI中直观地反映更新和验证错误。
在Form中使用时，您可以使用FormState上的方法来查询或操作表单数据。例如，调用FormState.save 将依次调用每个FormField的onSaved回调。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FractionallySizedBox'),
            initiallyExpanded: _openAll,
            title: Text('FractionallySizedBox'),
            children: <Widget>[
              Text('''一个小部件，可将其子级调整为总可用空间的一小部分。'''),
              SizedBox(
                height: 100,
                width: 300,
                child: Container(
                  color: Colors.green,
                  child: FractionallySizedBox(
                    heightFactor: 0.5,
                    widthFactor: 0.5,
                    child: Container(
                      child: Text('宽高分别是可用空间的一半'),
                      color: Colors.red,
                    ),
                  ),
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FractionalOffset'),
            initiallyExpanded: _openAll,
            title: Text('FractionalOffset'),
            children: <Widget>[
              Text(
                  '''Alignment的子类，FractionalOffset和Alignment是相同信息的两种不同表示：矩形内相对于矩形大小的位置。两个类之间的区别在于它们用于表示位置的坐标系。
FractionalOffset使用坐标系，其原点位于矩形的左上角，而Alignment使用坐标系，原点位于矩形的中心。
建议使用Alignment'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FractionalOffsetTween'),
            initiallyExpanded: _openAll,
            title: Text('FractionalOffsetTween'),
            children: <Widget>[
              Text('''FractionalOffset的Tween类型'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FractionalTranslation'),
            initiallyExpanded: _openAll,
            title: Text('FractionalTranslation'),
            children: <Widget>[
              Text('''在绘制其子项之前应用转换转换。'''),
              SizedBox(
                width: 100,
                height: 100,
                child: Container(
                  color: Colors.green,
                  child: FractionalTranslation(
                    child: Container(
                      child: Text('起点转换到中间'),
                      color: Colors.red,
                    ),
                    translation: Offset(0.5, 0.5),
                  ),
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FractionColumnWidth'),
            initiallyExpanded: _openAll,
            title: Text('FractionColumnWidth'),
            children: <Widget>[
              Text('''将列的大小调整为表格的maxWidth值的一个比例'''),
              Table(
                columnWidths: const <int, TableColumnWidth>{
                  0: FractionColumnWidth(0.5),
                  1: FlexColumnWidth(),
                },
                children: <TableRow>[
                  TableRow(children: <Widget>[
                    Container(
                      color: Colors.red,
                      child: Text('FractionColumnWidth(0.5)'),
                    ),
                    Container(
                      color: Colors.green,
                      child: Text('其他'),
                    )
                  ]),
                ],
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('FutureBuilder'),
            initiallyExpanded: _openAll,
            title: Text('FutureBuilder'),
            children: <Widget>[
              Text('''基于与Future交互的最新快照构建自己的小部件。'''),
              FutureBuilder(
                  future: null,
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    if (snapshot.connectionState == ConnectionState.done) {
                      return Text('done');
                    } else {
                      return Text('not done');
                    }
                  })
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('GestureDetector'),
            initiallyExpanded: _openAll,
            title: Text('GestureDetector'),
            children: <Widget>[
              Text('''检测手势的小部件。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('GlobalKey'),
            initiallyExpanded: _openAll,
            title: Text('GlobalKey'),
            children: <Widget>[
              Text('''使用GlobalKey，可以是的widget的在从一个树移动到另一个树的时候复用其子树，不会重新构建'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('GlowingOverscrollIndicator'),
            initiallyExpanded: _openAll,
            title: Text('GlowingOverscrollIndicator'),
            children: <Widget>[
              Text('''滚动视图已过度滚动的可视指示。 这里设置的是android手机的效果样式'''),
              RaisedButton(
                child: Text('跳转到示范页面'),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (BuildContext context) {
                    return GlowingOverscrollIndicatorPage();
                  }));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Gradient'),
            initiallyExpanded: _openAll,
            title:
                Text('Gradient(LinearGradient、RadialGradient、SweepGradient)'),
            children: <Widget>[
              Text(
                  '''渐变，Gradient是接口。其子类有LinearGradient、RadialGradient、SweepGradient。渐变可用于BoxDecoration'''),
              Container(
                child: Text('LinearGradient,水平行线显示渐变'),
                height: 20,
                width: 300,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: <Color>[Colors.blue, Colors.green])),
              ),
              Container(
                child: Text('RadialGradient以同心圆显示渐变'),
                height: 20,
                width: 300,
                decoration: BoxDecoration(
                    gradient: RadialGradient(
                        colors: <Color>[Colors.blue, Colors.green], radius: 5)),
              ),
              ClipOval(
                child: Container(
                  child: Text('SweepGradient在中心点周围以扫描弧形显示渐变'),
                  height: 50,
                  width: 300,
                  decoration: BoxDecoration(
                      gradient: SweepGradient(colors: <Color>[
                    Colors.blue,
                    Colors.green,
                    Colors.red,
                    Colors.purple
                  ])),
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('GridPaper'),
            initiallyExpanded: _openAll,
            title: Text('GridPaper'),
            children: <Widget>[
              Text('''一个小部件，用于绘制一个一像素宽的直线网格。与Stack一起使用，用于沿网格可视化您的布局。'''),
              GridPaper(
                child: Text('GraidPaper'),
                color: Colors.red,
                divisions: 3,
                interval: 50,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('GridView'),
            initiallyExpanded: _openAll,
            title: Text('GridView'),
            children: <Widget>[
              Text(
                  '''GridView控件可以构建一个二维网格列表。有两个简��构造函数，GridView.count创建横轴固定数量子元素的GridView，GridView.extent创建纵轴子元素为固定最大长度的的GridView'''),
              RaisedButton(
                child: Text('跳转到详情页面'),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => GridViewPage()));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Hero'),
            initiallyExpanded: _openAll,
            title: Text('Hero'),
            children: <Widget>[
              Text('''页面跳转的时候，如果前后两个页面中都包含Hero，且tag相等，则跳转的时候Hero会有动画效果'''),
              RaisedButton(
                child: Text('跳转到下一个Hero页面'),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => HeroPage()));
                },
              ),
              Hero(
                child: Container(
                  height: 50,
                  color: Colors.red,
                  child: Text('in list view'),
                ),
                tag: 'hero',
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Icon'),
            initiallyExpanded: _openAll,
            title: Text('Icon'),
            children: <Widget>[
              Text('通过IconData生成Icon，可以设置颜色大小'),
              Icon(
                Icons.add,
                color: Colors.red,
                size: 60,
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('IconTheme'),
            initiallyExpanded: _openAll,
            title: Text('IconTheme'),
            children: <Widget>[
              Text('控制窗口小部件子树中图标的默认颜色，不透明度和大小。'),
              IconTheme(
                child: Icon(
                  Icons.add,
                ),
                data: IconThemeData(color: Colors.blue, size: 40, opacity: 0.5),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('IgnorePointer'),
            initiallyExpanded: _openAll,
            title: Text('IgnorePointer'),
            children: <Widget>[
              Text('在hit test中不可见的widget。当ignoring为true时，此widget及其子树不响应事件。'),
              IgnorePointer(
                ignoring: true,
                child: RaisedButton(
                  child: Text('不接受点击事件'),
                  onPressed: () {},
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Image'),
            initiallyExpanded: _openAll,
            title: Text('Image'),
            children: <Widget>[
              Text('''���示图像的小部件。
Image，用于从ImageProvider获取图像。
Image.asset，用于 使用密钥从AssetBundle获取图像。
Image.network，用于从URL获取图像。
Image.file，用于从文件中获取图像。
Image.memory，用于从Uint8List获取图像。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ImageCache'),
            initiallyExpanded: _openAll,
            title: Text('ImageCache'),
            children: <Widget>[
              Text(
                  '''用于缓存图像的类。实现最近使用的图片的缓存，最多1000个图像，最多100 MB。可以使用maximumSize和 maximumSizeBytes调整最大大小。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ImageIcon'),
            initiallyExpanded: _openAll,
            title: Text('ImageIcon'),
            children: <Widget>[
              Text(
                  '''来自ImageProvider的图标，例如AssetImage，将图片有颜色的地方都改成设定的color颜色'''),
              ImageIcon(
                AssetImage('lib/Resource/icon.png'),
                color: Colors.red,
                size: 50,
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ImageProvider'),
            initiallyExpanded: _openAll,
            title: Text('ImageProvider'),
            children: <Widget>[
              Text('''ImageProvider使用全局imageCache来缓存图像'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('IndexedStack'),
            initiallyExpanded: _openAll,
            title: Text('IndexedStack'),
            children: <Widget>[
              Text(
                  '''一个Stack，显示来自子列表的单个子项。显示给定索引的子widget。Stack的大小和最大的子Widget一样。如果value为null，则不显示任何内容'''),
              RaisedButton(
                child: Text('切换'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              IndexedStack(
                index: animateBool ? 0 : 1,
                children: <Widget>[
                  Text('first'),
                  Text('second'),
                ],
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('InheritedModel、InheritedWidget'),
            initiallyExpanded: _openAll,
            title: Text('InheritedModel、InheritedWidget'),
            children: <Widget>[
              Text(
                  '''被其嵌套的子widget可以通过InheritedModel.inheritFrom获取到InheritedModel或者InheritedWidget'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('InlineSpan'),
            initiallyExpanded: _openAll,
            title: Text('InlineSpan'),
            children: <Widget>[
              Text('''内联内容的不可变跨度，构成段落的一部分。
子类TextSpan指定文本，可能包含子InlineSpan。
子类PlaceholderSpan表示可以填充非文本内容的占位符。PlaceholderSpan本身定义了一个 ui.PlaceholderAlignemnt和一个TextBaseline。为了有用， 必须扩展PlaceholderSpan以定义内容。这个例子是小部件库中的WidgetSpan类。
子类WidgetSpan指定嵌入式内联窗口小部件。'''),
              RaisedButton(
                child: Text('跳转到示例页面'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => InLineSpanPage()));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Interval'),
            initiallyExpanded: _openAll,
            title: Text('Interval'),
            children: <Widget>[
              Text('''作用为将整个动画时间分成不同的段分别执行不同动画'''),
              RaisedButton(
                child: Text('跳转到示例页面'),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => IntervalPage()));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('IntrinsicColumnWidth'),
            initiallyExpanded: _openAll,
            title: Text('IntrinsicColumnWidth'),
            children: <Widget>[
              Text(
                  '''根据该列中所有单元格的内在尺寸确定列的大小。TableColumnWidth子类。felx参数用于分配剩余空间用'''),
              Table(
                columnWidths: const <int, TableColumnWidth>{
                  0: FractionColumnWidth(0.5),
                  1: IntrinsicColumnWidth(),
                },
                children: <TableRow>[
                  TableRow(children: <Widget>[
                    Container(
                      color: Colors.red,
                      child: Text('FractionColumnWidth(0.5)'),
                    ),
                    Container(
                      color: Colors.green,
                      child: Text('其他'),
                    )
                  ]),
                  TableRow(children: <Widget>[
                    Container(
                      color: Colors.red,
                      child: Text('FractionColumnWidth(0.5)'),
                    ),
                    Container(
                      color: Colors.green,
                      child: Text('其他wwww'),
                    )
                  ]),
                ],
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('IntrinsicHeight'),
            initiallyExpanded: _openAll,
            title: Text('IntrinsicHeight'),
            children: <Widget>[
              Text('''一个小部件，可以将其子级调整为子级的内在高度。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('IntrinsicWidth'),
            initiallyExpanded: _openAll,
            title: Text('IntrinsicWidth'),
            children: <Widget>[
              Text('''一个小部件，它将子级的大小调整为子级的内部宽度。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('KeepAlive'),
            initiallyExpanded: _openAll,
            title: Text('KeepAlive'),
            children: <Widget>[
              Text(
                  '''标记一个孩子需要保持活着，即使它在一个懒惰的列表中，否则将删除它。很少直接使用，一般通过设置列表的addAutomaticKeepAlives为true实现相同功能。详见上面AutomaticKeepAlive的介绍'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('KeyedSubtree'),
            initiallyExpanded: _openAll,
            title: Text('KeyedSubtree'),
            children: <Widget>[
              Text('''构建其子项的小部件。用于将键附加到现有小部件。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('LabeledGlobalKey'),
            initiallyExpanded: _openAll,
            title: Text('LabeledGlobalKey'),
            children: <Widget>[
              Text('''带调试标签的全局密钥。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('LayoutBuilder'),
            initiallyExpanded: _openAll,
            title: Text('LayoutBuilder'),
            children: <Widget>[
              Text(
                  '''构建可依赖于父窗口小部件大小的窗口小部件树。与Builder小部件类似，只是在布局时调用构建器函数并提供父小部件的约束'''),
              Container(
                height: 50,
                color: Colors.red,
                child: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                    return Text('最大可用高度=' +
                        constraints.maxHeight.toString() +
                        ';最大可用宽度=' +
                        constraints.maxWidth.toString());
                  },
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('LimitedBox'),
            initiallyExpanded: _openAll,
            title: Text('LimitedBox'),
            children: <Widget>[
              Text(
                  '''只有当它不受约束时才限制其child大小。如果此窗口小部件的最大宽度不受约束，则其子窗口的宽度将限制为maxWidth。同样，如果此窗口小部件的最大高度不受约束，则其子窗口的高度仅限于maxHeight。如下例子，高度不受约束，所以只有maxHeight起效'''),
              LimitedBox(
                maxHeight: 50,
                maxWidth: 50,
                child: Container(
                  color: Colors.red,
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Listener'),
            initiallyExpanded: _openAll,
            title: Text('Listener'),
            children: <Widget>[
              Text('''用来监听原始触摸事件。点击下面蓝框可看到效果'''),
              Listener(
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.blue,
                  width: 300.0,
                  height: 150.0,
                  child: Text(_event?.toString() ?? "",
                      style: TextStyle(color: Colors.white)),
                ),
                onPointerDown: (PointerDownEvent event) =>
                    setState(() => _event = event),
                onPointerMove: (PointerMoveEvent event) =>
                    setState(() => _event = event),
                onPointerUp: (PointerUpEvent event) =>
                    setState(() => _event = event),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ListView'),
            initiallyExpanded: _openAll,
            title: Text('ListView'),
            children: <Widget>[
              Text('''列表'''),
              RaisedButton(
                child: Text('跳转到详情'),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (BuildContext context) {
                    return ListViewPage();
                  }));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ListWheelScrollView'),
            initiallyExpanded: _openAll,
            title: Text('ListWheelScrollView'),
            children: <Widget>[
              Text(
                  '''当列表处于零滚动偏移时，第一个子项与视口的中间对齐。当列表位于最终滚动偏移量时，最后一个子节点与视口的中间对齐'''),
              RaisedButton(
                child: Text('跳转到示例页面'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => ListWheelSCrollViewPage()));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('LongPressDraggable'),
            initiallyExpanded: _openAll,
            title: Text('LongPressDraggable'),
            children: <Widget>[
              Text('''从长按开始使其孩子可以拖拽。Draggable的子类，可以拖拽到DraggableTarget'''),
              LongPressDraggable(
                child: Text('can be dragged'),
                feedback: Text('feedback'),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('MaxColumnWidth'),
            initiallyExpanded: _openAll,
            title: Text('MaxColumnWidth'),
            children: <Widget>[
              Text(
                  '''确定列的大小，使其大小为两个列宽规范的最大值。TableColumnWidth子类。MaxColumnWidth（TableColumnWidth a， TableColumnWidth b）'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('MediaQuery'),
            initiallyExpanded: _openAll,
            title: Text('MediaQuery'),
            children: <Widget>[
              Text(
                  '''InheritedWidget子类。可以用来获取设备信息，也可以创建一个向其后代提供MediaQueryData的窗口小部件。MediaQueryData可通过MediaQuery.of获取'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('MinColumnWidth'),
            initiallyExpanded: _openAll,
            title: Text('MinColumnWidth'),
            children: <Widget>[
              Text('''与MaxColumnWidth相对应，设置列宽为两个列宽中的最小值'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ModalBarrier'),
            initiallyExpanded: _openAll,
            title: Text('ModalBarrier'),
            children: <Widget>[
              Text('''一个小部件，阻止用户与自身后面的小部件交互'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ModalRoute'),
            initiallyExpanded: _openAll,
            title: Text('ModalRoute'),
            children: <Widget>[
              Text(
                  '''阻止与先前路由交互的路由。ModalRoute覆盖整个导航器。然而，它们不一定是 不透明的 ; 例如，弹出菜单使用ModalRoute，但仅在与前一个路径重叠的小框中显示菜单。showGeneralDialog用的就是该中类型路由'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('NavigationToolbar'),
            initiallyExpanded: _openAll,
            title: Text('NavigationToolbar'),
            children: <Widget>[
              Text(
                  '''NavigationToolbar是一个布局助手，用于沿水平轴定位3个小部件或小部件组，这对于应用程序的导航栏是合理的'''),
              Container(
                  color: Colors.red,
                  height: 50,
                  child: NavigationToolbar(
                    leading: Text('leading'),
                    middle: Text('middle'),
                    trailing: Text('trailing'),
                  )),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('NestedScrollView'),
            initiallyExpanded: _openAll,
            title: Text('NestedScrollView'),
            children: <Widget>[
              Text('''其中的滚动视图可以嵌套其他滚动视图，其滚动位置本质上是链接的。'''),
              RaisedButton(
                child: Text('跳转到详情'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => NestedScrollViewPage()));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('NestedScrollViewViewport'),
            initiallyExpanded: _openAll,
            title: Text('NestedScrollViewViewport'),
            children: <Widget>[
              Text('''NestedScrollView使用的Viewport变体。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('NetworkImage'),
            initiallyExpanded: _openAll,
            title: Text('NetworkImage'),
            children: <Widget>[
              Text('''NetworkImage通过url显示图片。Image.network内部使用的就是该小部件'''),
            ],
          ),
          ExpansionTile(
              key: PageStorageKey('Notification'),
              initiallyExpanded: _openAll,
              title: Text('Notification'),
              children: <Widget>[
                Text(
                    '''Notification是Flutter中一个重要的机制，在Widget树中，每一个节点都可以分发通知，通知会沿着当前节点（context）向上传递，所有父节点都可以通过NotificationListener来监听通知，Flutter中称这种通知由子向父的传递为“通知冒泡”（Notification Bubbling），这个和用户触摸事件冒泡是相似的，但有一点不同：通知冒泡可以中止，但用户触摸事件不行。可以用dispatch方法分发通知，如MyNotification("Hi").dispatch(context)'''),
                RaisedButton(
                    child: Text('跳转到详情'),
                    onPressed: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => NotificationRoute()));
                    })
              ]),
          ExpansionTile(
            key: PageStorageKey('OverflowBox'),
            initiallyExpanded: _openAll,
            title: Text('OverflowBox'),
            children: <Widget>[
              Text(
                  '''一个小部件对其子级施加不同于从其���级���得���约束，可能允许子级溢出父级。当OverflowBox小��child的大小，则以最大尺寸为基准'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Overlay'),
            initiallyExpanded: _openAll,
            title: Text('Overlay'),
            children: <Widget>[
              Text(
                  '''一个小部件对其子级施加不同于从其父级获得的约束，可能允许子级溢出父级。当OverflowBox小于child的大小，则以最大尺寸为基准。常使用Navigator实现类似效果'''),
              RaisedButton(
                child: Text('跳到详情'),
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(
                    builder: (BuildContext context) {
                      return OverlayPage();
                    },
                  ));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Offstage'),
            initiallyExpanded: _openAll,
            title: Text('Offstage'),
            children: <Widget>[
              Text(
                  '''一个小部件，通过设置offstage参数它可将孩子放在树中，但不会绘制任何东西，不会让孩子可用于点击，也不会占用父母的任何空间。'''),
              RaisedButton(
                child: Text('隐藏或显示Offstage'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              Offstage(
                child: Text('Offstage'),
                offstage: animateBool,
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Opacity'),
            initiallyExpanded: _openAll,
            title: Text('Opacity'),
            children: <Widget>[
              Text('''此类将其子绘制到中间缓冲区，然后将子项混合部分透明绘制到屏幕。'''),
              Opacity(
                opacity: 0.5,
                child: Text('0.5Opacity'),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('OrientationBuilder'),
            initiallyExpanded: _openAll,
            title: Text('OrientationBuilder'),
            children: <Widget>[
              Text('''构建可依赖于父窗口小部件方向的窗口小部件树（与设备方向不同）。'''),
              OrientationBuilder(
                builder: (BuildContext context, Orientation orientation) {
                  return Text(orientation.toString());
                },
              ),
            ],
          ),
          ExpansionTile(
              key: PageStorageKey('OverflowBox'),
              initiallyExpanded: _openAll,
              title: Text('OverflowBox'),
              children: <Widget>[
                Text('''构建可依赖于父窗口小部件方向的窗口小部件树（与设备方向不同）。'''),
                Container(
                    height: 30,
                    color: Colors.red,
                    child: OverflowBox(
                        maxHeight: 50,
                        child: Container(
                          color: Colors.green,
                          child: Text('OverflowBox'),
                        ))),
              ]),
          ExpansionTile(
            key: PageStorageKey('OverlayEntry'),
            initiallyExpanded: _openAll,
            title: Text('OverlayEntry'),
            children: <Widget>[
              Text(
                  '''使用OverlayState.insert或OverlayState.insertAll函数将 叠加条目插入到Overlay中。要查找给定BuildContext的最近的封闭叠加层，请使用Overlay.of 函数。
叠加条目一次最多只能有一个叠加。要从叠加层中删除条目，请调用叠加条目上的删除功能。
由于Overlay使用Stack布局，因此overlay窗口可以使用 Positioned和AnimatedPositioned将自己定位在叠加层中。'''),
              RaisedButton(
                child: Text('跳到详情'),
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(
                    builder: (BuildContext context) {
                      return OverlayPage();
                    },
                  ));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('OverlayRoute'),
            initiallyExpanded: _openAll,
            title: Text('OverlayRoute'),
            children: <Widget>[
              Text('''在导航器的叠加层中显示窗口小部件的路径。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Padding'),
            initiallyExpanded: _openAll,
            title: Text('Padding'),
            children: <Widget>[
              Text('''一个小部件，它通过给定的填充来保护其子级。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('PageController、PageView'),
            initiallyExpanded: _openAll,
            title: Text('PageController、PageView'),
            children: <Widget>[
              Text('''PageController允许操纵在PageView中可见的页面'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('PageRoute'),
            initiallyExpanded: _openAll,
            title: Text('PageRoute'),
            children: <Widget>[
              Text('''ModalRoute的子类'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('PageRouteBuilder'),
            initiallyExpanded: _openAll,
            title: Text('PageRouteBuilder'),
            children: <Widget>[
              Text('''ModalRoute的子类,可以添加自定义页面跳转效果'''),
              RaisedButton(
                child: Text('显示示例'),
                onPressed: () {
                  Navigator.push(
                      context,
                      PageRouteBuilder(
                        transitionDuration: Duration(milliseconds: 500),
                        pageBuilder: (BuildContext context, Animation animation,
                            Animation secondaryAnimation) {
                          return FadeTransition(
                            opacity: animation,
                            child: OverlayPage(),
                          );
                        },
                      ));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('PageStorage'),
            initiallyExpanded: _openAll,
            title: Text('PageStorage、PageStorageBucket、PageStorageKey'),
            children: <Widget>[
              Text('''为子树建立页面存储桶的窗口小部件。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ParentDataWidget'),
            initiallyExpanded: _openAll,
            title: Text('ParentDataWidget、ParentData'),
            children: <Widget>[
              Text(
                  '''将ParentData信息挂接到RenderObjectWidget的子节点的小部件的基类。 ParentData在Flutter的布局系统中，负责存储父节点所需要的子节点的布局信息。在applyParentData
              方法中会返回父renderObject'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('PhysicalModel'),
            initiallyExpanded: _openAll,
            title: Text('PhysicalModel'),
            children: <Widget>[
              Text('''一个小部件，可以设置形状、Z轴、背景色、是否裁剪、阴影、圆角。其裁剪形状由Clip枚举决定'''),
              PhysicalModel(
                shape: BoxShape.circle,
                shadowColor: Colors.green,
                elevation: 5,
                child: Text('hello PhysicalModel'),
                color: Colors.red,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('PhysicalShape'),
            initiallyExpanded: _openAll,
            title: Text('PhysicalShape'),
            children: <Widget>[
              Text('''与PhysicalModel类似，不过其裁剪形状由path定义'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Placeholder'),
            initiallyExpanded: _openAll,
            title: Text('Placeholder'),
            children: <Widget>[
              Text('''一个小部件，它绘制一个框，表示有一天会添加其他小部件的位置。'''),
              Placeholder(
                fallbackHeight: 50,
                color: Colors.red,
                strokeWidth: 5,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Positioned'),
            initiallyExpanded: _openAll,
            title: Text('Positioned'),
            children: <Widget>[
              Text('''控制Stack的子控件位置'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('PositionedDirectional'),
            initiallyExpanded: _openAll,
            title: Text('PositionedDirectional'),
            children: <Widget>[
              Text('''控制Stack的子控件位置，与Positioned类似，不过左右改成start和end'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('PositionedTransition'),
            initiallyExpanded: _openAll,
            title: Text('PositionedTransition'),
            children: <Widget>[
              Text('''Positioned的动画版本'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('PreferredSize'),
            initiallyExpanded: _openAll,
            title: Text('PreferredSize'),
            children: <Widget>[
              Text(
                  '''此窗口小部件不会对其子项施��任何约束，也不会以任何方式影响子项的布局。它只是宣传了父母可以使用的首选大小。'''),
              PreferredSize(
                child: Text('PreferredSize 50x50'),
                preferredSize: Size(50, 50),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('PrimaryScrollController'),
            initiallyExpanded: _openAll,
            title: Text('PrimaryScrollController'),
            children: <Widget>[
              Text('''将ScrollController与子树关联。'''),
              RaisedButton(
                child: Text('跳转到详情'),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => PrimaryScrollControllerPage()));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RawKeyboardListener'),
            initiallyExpanded: _openAll,
            title: Text('RawKeyboardListener'),
            children: <Widget>[
              Text('''监听键盘输入，但是onkey等回调方法还无法使用'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RelativePositionedTransition'),
            initiallyExpanded: _openAll,
            title: Text('RelativePositionedTransition'),
            children: <Widget>[
              Text('''Positioned的动画版本，它根据相对于具有指定大小的边界框的rect值转换子项的位置。'''),
              RaisedButton(
                child: Text('开始动画 '),
                onPressed: () {
                  rectAnimation.status == AnimationStatus.completed
                      ? controller.reverse()
                      : controller.forward();
                },
              ),
              Container(
                height: 100,
                color: Colors.green,
                child: Stack(
                  children: <Widget>[
                    PositionedTransition(
                      child: Container(
                        color: Colors.red,
                        child: Center(
                          child: Text(
                            'RelativePositionedTransition',
                          ),
                        ),
                      ),
                      rect: rectAnimation,
                    )
                  ],
                ),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RelativeRect'),
            initiallyExpanded: _openAll,
            title: Text('RelativeRect'),
            children: <Widget>[
              Text('''在父容器内，通过设定距离父容器上下左右距离实现rect'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RelativeRectTween'),
            initiallyExpanded: _openAll,
            title: Text('RelativeRectTween'),
            children: <Widget>[
              Text('''RelativeRect的Tween类型'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RepaintBoundary'),
            initiallyExpanded: _openAll,
            title: Text('RepaintBoundary'),
            children: <Widget>[
              Text(
                  '''RepaintBoundary小部件创建了一个始终具有Layer的RenderObject，将祖先渲染对象与后代渲染对象分离。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ReverseAnimation'),
            initiallyExpanded: _openAll,
            title: Text('ReverseAnimation'),
            children: <Widget>[
              Text('''创建与另一个动画相反的动画。如果父动画从0.0向前运行，则此动画从1.0反向运行到0.0。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ReverseTween'),
            initiallyExpanded: _openAll,
            title: Text('ReverseTween'),
            children: <Widget>[
              Text('''创建与另外一个Tween相反的Tween'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RichText'),
            initiallyExpanded: _openAll,
            title: Text('RichText'),
            children: <Widget>[
              Text('''一段富文本。'''),
              RichText(
                text: TextSpan(
                  text: 'Hello ',
                  style: DefaultTextStyle.of(context).style,
                  children: <TextSpan>[
                    TextSpan(
                        text: 'bold',
                        style: TextStyle(fontWeight: FontWeight.bold)),
                    TextSpan(
                        text: ' world!', style: TextStyle(color: Colors.red)),
                  ],
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RotatedBox'),
            initiallyExpanded: _openAll,
            title: Text('RotatedBox'),
            children: <Widget>[
              Text('''一个小部件，可以将其子项顺时针旋转整数个四分之一圈。'''),
              RotatedBox(
                quarterTurns: 3,
                child: const Text(
                  'Hello World! 转3个四分一圈',
                  style: TextStyle(color: Colors.red),
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RotationTransition'),
            initiallyExpanded: _openAll,
            title: Text('RotationTransition'),
            children: <Widget>[
              Text('''动画小部件的旋转。'''),
              RaisedButton(
                child: Text('开始动画 '),
                onPressed: () {
                  rectAnimation.status == AnimationStatus.completed
                      ? controller.reverse()
                      : controller.forward();
                },
              ),
              RotationTransition(
                //旋转动画
                turns: CurvedAnimation(
                    parent: controller, curve: Curves.bounceInOut),
                child: new FlutterLogo(
                  size: 200.0,
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RoundedRectangleBorder'),
            initiallyExpanded: _openAll,
            title: Text('RoundedRectangleBorder'),
            children: <Widget>[
              Text('''带圆角的矩形边框。ShapeBorder子类'''),
              RaisedButton(
                onPressed: () {},
                child: Text('RoundedRectangleBorder'),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20)),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Row'),
            initiallyExpanded: _openAll,
            title: Text('Row'),
            children: <Widget>[
              Text('''一个小部件，用于在水平数组中显示其子项。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RRect'),
            initiallyExpanded: _openAll,
            title: Text('RRect'),
            children: <Widget>[
              Text('''一个不可变的圆角矩形，所有四个角都有自定义半径。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('RSTransform'),
            initiallyExpanded: _openAll,
            title: Text('RSTransform'),
            children: <Widget>[
              Text('''由平移，旋转和均匀比例组成的变换。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SafeArea'),
            initiallyExpanded: _openAll,
            title: Text('SafeArea'),
            children: <Widget>[
              Text('''会缩小孩子的尺寸以避免iPhone X上的Notch或显示器的其他类似创意物理特征。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SawTooth'),
            initiallyExpanded: _openAll,
            title: Text('SawTooth'),
            children: <Widget>[
              Text('''锯齿曲线，在单位间隔内重复给定次数。0到1，即刻跳到0，然后又是0到1，如此重复'''),
              RaisedButton(
                child: Text('开始'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              AnimatedCount(
                count: animateBool ? 10 : 100,
                curve: SawTooth(8),
                duration: Duration(seconds: 10),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ScaleTransition'),
            initiallyExpanded: _openAll,
            title: Text('ScaleTransition'),
            children: <Widget>[
              Text('''Scale动画类型'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Scrollable'),
            initiallyExpanded: _openAll,
            title: Text('Scrollable'),
            children: <Widget>[
              Text('''可滚动的小部件'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Scrollable'),
            initiallyExpanded: _openAll,
            title: Text('Scrollable'),
            children: <Widget>[
              Text('''确定Scrollable小部件的物理特性。如是否可以滚动、是否可以滚动超出范围等'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Semantics'),
            initiallyExpanded: _openAll,
            title: Text('Semantics'),
            children: <Widget>[
              Text('''可选择性。这意味着你可以完全不关心它的使用，但是不建议
主要用于在 Android TalkBack 或者 iOS VoiceOver 使用，例如视障人士的使用
主要用于屏幕阅读器的使用，它将描述这个应用程序而不需要查看屏幕'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ShaderMask'),
            initiallyExpanded: _openAll,
            title: Text('ShaderMask'),
            children: <Widget>[
              Text('''一个小部件，它将生成的Shader遮罩应用于其子级。'''),
              ShaderMask(
                blendMode: BlendMode.srcATop,
                shaderCallback: (Rect bounds) {
                  return RadialGradient(
                    center: Alignment.center,
                    radius: 1.0,
                    colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
                    tileMode: TileMode.mirror,
                  ).createShader(bounds);
                },
                child: const Text('I’m burning the memories'),
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Shadow'),
            initiallyExpanded: _openAll,
            title: Text('Shadow'),
            children: <Widget>[
              Text('''阴影类'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ShapeBorderClipper'),
            initiallyExpanded: _openAll,
            title: Text('ShapeBorderClipper'),
            children: <Widget>[
              Text('''CustomClipper<Path>子类,根据ShapeBorder裁剪'''),
              ClipPath(
                clipper: ShapeBorderClipper(
                    shape: CircleBorder(side: BorderSide(color: Colors.red))),
                child: Container(
                  height: 50,
                  width: 100,
                  color: Colors.green,
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('ShapeDecoration'),
            initiallyExpanded: _openAll,
            title: Text('ShapeDecoration'),
            children: <Widget>[
              Text(
                  '''ShapeDecoration类提供了一种绘制ShapeBorder的途径，可以选择设置颜色、渐变、图片和阴影'''),
              Container(
                decoration: ShapeDecoration(
                  color: Colors.white,
                  shape: Border.all(
                        color: Colors.red,
                        width: 8.0,
                      ) +
                      Border.all(
                        color: Colors.green,
                        width: 8.0,
                      ) +
                      Border.all(
                        color: Colors.blue,
                        width: 8.0,
                      ),
                ),
                child: const Text('RGB', textAlign: TextAlign.center),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SingleChildScrollView'),
            initiallyExpanded: _openAll,
            title: Text('SingleChildScrollView'),
            children: <Widget>[
              Text('''可以滚动单个窗口小部件的框。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SizedBox'),
            initiallyExpanded: _openAll,
            title: Text('SizedBox'),
            children: <Widget>[
              Text(
                  '''具有指定大小的框。SizedBox.expand构造可以用来制造SizedBox该尺寸本身，以适应父。它相当于将宽度和 高度设置为double.infinity。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SizedOverflowBox'),
            initiallyExpanded: _openAll,
            title: Text('SizedOverflowBox'),
            children: <Widget>[
              Text('''一个特定大小的窗口小部件，但将其原始约束传递给其子节点，然后可能会溢出。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SizeTransition'),
            initiallyExpanded: _openAll,
            title: Text('SizeTransition'),
            children: <Widget>[
              Text('''动画自己的大小和剪辑并对齐其孩子。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SizeTween'),
            initiallyExpanded: _openAll,
            title: Text('SizeTween'),
            children: <Widget>[
              Text('''Size的Tween类型'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SlideTransition'),
            initiallyExpanded: _openAll,
            title: Text('SlideTransition'),
            children: <Widget>[
              Text('''动画小部件相对于其正常位置的位置。则Offset动画'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverFillRemaining'),
            initiallyExpanded: _openAll,
            title: Text('SliverFillRemaining'),
            children: <Widget>[
              Text('''创建填充Viewport中剩余空间的sliver。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverFillViewport'),
            initiallyExpanded: _openAll,
            title: Text('SliverFillViewport'),
            children: <Widget>[
              Text('''一个包含多个子box，且每个box都填充满viewport的sliver'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverFixedExtentList'),
            initiallyExpanded: _openAll,
            title: Text('SliverFixedExtentList'),
            children: <Widget>[
              Text('''一���包含��个子box，且每个box高度或宽度(横向的时候)相同的sliver'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverGrid'),
            initiallyExpanded: _openAll,
            title: Text('SliverGrid'),
            children: <Widget>[
              Text('''Grid的sliver类型'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverList'),
            initiallyExpanded: _openAll,
            title: Text('SliverList'),
            children: <Widget>[
              Text('''list的sliver类型'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverOverlapAbsorber、SliverOverlapInjector'),
            initiallyExpanded: _openAll,
            title: Text('SliverOverlapAbsorber、SliverOverlapInjector'),
            children: <Widget>[
              Text(
                  '''两个配合使用，SliverOverlapAbsorber包含header，SliverOverlapInjector包含body。sliver请求的重叠与SliverOverlapAbsorber报告的重叠之间的差异（称为吸收重叠）将报告给SliverOverlapAbsorberHandle，后者通常传递给 SliverOverlapInjector。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverPadding'),
            initiallyExpanded: _openAll,
            title: Text('SliverPadding'),
            children: <Widget>[
              Text('''用于设置sliver的padding'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverPersistentHeader'),
            initiallyExpanded: _openAll,
            title: Text('SliverPersistentHeader'),
            children: <Widget>[
              Text(
                  '''当sliver滚动到视口的前缘时，尺寸​​变化的sliver。这是SliverAppBar用于缩小/增长效果的布局基元。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverPrototypeExtentList'),
            initiallyExpanded: _openAll,
            title: Text('SliverPrototypeExtentList'),
            children: <Widget>[
              Text(
                  '''将其子项排列在沿着主轴的一条线上，从零偏移开始，没有间隙。每个子项的约束程度与沿主轴的prototypeItem和沿横轴的SliverConstraints.crossAxisExtent的程度相同。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverSafeArea'),
            initiallyExpanded: _openAll,
            title: Text('SliverSafeArea'),
            children: <Widget>[
              Text('''sliver中使用的SafeArea'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('SliverToBoxAdapter'),
            initiallyExpanded: _openAll,
            title: Text('SliverToBoxAdapter'),
            children: <Widget>[
              Text('''包含单个框小部件的条子。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Spacer'),
            initiallyExpanded: _openAll,
            title: Text('Spacer'),
            children: <Widget>[
              Text('''Spacer创建一个可调整的空间隔，可用于调整Flex容器（如行或列）中窗口小部件之间的间距。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Stack'),
            initiallyExpanded: _openAll,
            title: Text('Stack'),
            children: <Widget>[
              Text('''重叠多个子项'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('StadiumBorder'),
            initiallyExpanded: _openAll,
            title: Text('StadiumBorder'),
            children: <Widget>[
              Text('''ShapeBorder的子类。一个边框，适合体育场形状的边框（两端有半圆的框）'''),
              Material(
                color: Colors.amber,
                shape: new StadiumBorder(
                  side: const BorderSide(width: 2.0, color: Colors.brown),
                ),
                child: new Container(
                  padding: const EdgeInsets.all(40.0),
                  child: new Text(
                    '你好 Material',
                    style: new TextStyle(fontSize: 14.0),
                  ),
                ),
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('StatefulBuilder'),
            initiallyExpanded: _openAll,
            title: Text('StatefulBuilder'),
            children: <Widget>[
              Text('''快速创建一个statefulwidget'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('StatusTransitionWidget'),
            initiallyExpanded: _openAll,
            title: Text('StatusTransitionWidget'),
            children: <Widget>[
              Text('''在给定动画( Animation<double> animation)更改状态时重建的窗口小部件。'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('StepTween'),
            initiallyExpanded: _openAll,
            title: Text('StepTween'),
            children: <Widget>[
              Text('''两个整数之间的插值'''),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('StreamBuilder'),
            initiallyExpanded: _openAll,
            title: Text('StreamBuilder'),
            children: <Widget>[
              Text(
                '''基于与Stream交互的最新快照构建自身的小组件''',
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('StrutStyle'),
            initiallyExpanded: _openAll,
            title: Text('StrutStyle'),
            children: <Widget>[
              Text(
                '''Strut是一种允许设置最小线高的功能。用于文本中''',
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Table'),
            initiallyExpanded: _openAll,
            title: Text('Table'),
            children: <Widget>[
              Text(
                '''嵌入在文本中的不可变小部件。''',
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('UnconstrainedBox'),
            initiallyExpanded: _openAll,
            title: Text('UnconstrainedBox'),
            children: <Widget>[
              Text(
                '''一个小部件，对其子级没有约束，允许它以“自然”大小呈现.如果盒子不能扩展到足以容纳整个孩子，那么孩子将被剪裁。''',
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Visibility'),
            initiallyExpanded: _openAll,
            title: Text('Visibility'),
            children: <Widget>[
              Text(
                '''可以控制显示或隐藏的小部件，隐藏时不占用空间''',
              ),
              RaisedButton(
                child: Text('显示或者隐藏'),
                onPressed: () {
                  setState(() {
                    animateBool = !animateBool;
                  });
                },
              ),
              Visibility(
                child: Text('Visibility'),
                visible: animateBool,
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Viewport'),
            initiallyExpanded: _openAll,
            title: Text('Viewport'),
            children: <Widget>[
              Text(
                '''Viewport是滚动机械的视觉主力。它根据自己的尺寸和给定的偏移量显示其子集的子集 。随着偏移量的变化，通过视口可以看到不同的子项。''',
              ),
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('WidgetSpan'),
            initiallyExpanded: _openAll,
            title: Text('WidgetSpan'),
            children: <Widget>[
              Text(
                '''表格''',
              ),
              Text.rich(TextSpan(
                children: <InlineSpan>[
                  TextSpan(text: 'Flutter is'),
                  WidgetSpan(
                      child: SizedBox(
                    width: 120,
                    height: 50,
                    child: Card(child: Center(child: Text('Hello World!'))),
                  )),
                  TextSpan(text: 'the best!'),
                ],
              ))
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('WillPopScope'),
            initiallyExpanded: _openAll,
            title: Text('WillPopScope'),
            children: <Widget>[
              Text(
                '''表格''',
              ),
              RaisedButton(
                child: Text('跳转到详情'),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (BuildContext context) {
                    return WillPopScopPage();
                  }));
                },
              )
            ],
          ),
          ExpansionTile(
            key: PageStorageKey('Wrap'),
            initiallyExpanded: _openAll,
            title: Text('Wrap'),
            children: <Widget>[
              Text(
                '''嵌入在文本中的不可变小部件。''',
              ),
              Wrap(
                spacing: 8.0, // gap between adjacent chips
                runSpacing: 4.0, // gap between lines
                children: <Widget>[
                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.blue.shade900,
                        child: Text('AH')),
                    label: Text('Hamilton'),
                    deleteIcon: Icon(Icons.delete_forever),
                    deleteIconColor: Colors.red,
                    deleteButtonTooltipMessage: "删除该条",
                    onDeleted: () {},
                  ),
                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.blue.shade900,
                        child: Text('ML')),
                    label: Text('Lafayette'),
                  ),
                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.blue.shade900,
                        child: Text('HM')),
                    label: Text('Mulligan'),
                  ),
                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.blue.shade900,
                        child: Text('JL')),
                    label: Text('Laurens'),
                  ),
                ],
              )
            ],
          ),
          SizedBox(
            height: 50,
          ),
        ],
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..isAntiAlias = true
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5
      ..color = Colors.green;
    canvas.drawRect(Offset.zero & Size(100, 100), paint);
    canvas.drawArc(Offset(10, 10) & Size(40, 40), 3, 3, true, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return false;
  }
}

class RectClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    // TODO: implement getClip
    Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height / 2);
    return rect;
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    // TODO: implement shouldReclip
    return false;
  }
}

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width / 2, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(TriangleClipper oldClipper) => false;
}

class SpinningContainer extends AnimatedWidget {
  const SpinningContainer({Key key, AnimationController controller})
      : super(key: key, listenable: controller);

  Animation<double> get _progress => listenable;

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: _progress.value * 2.0 * math.pi,
      child: Container(width: 200.0, height: 200.0, color: Colors.green),
    );
  }
}

class AnimatedCount extends ImplicitlyAnimatedWidget {
  final int count;

  AnimatedCount(
      {Key key,
      @required this.count,
      @required Duration duration,
      Curve curve = Curves.linear})
      : super(duration: duration, curve: curve, key: key);

  @override
  ImplicitlyAnimatedWidgetState<ImplicitlyAnimatedWidget> createState() =>
      _AnimatedCountState();
}

class _AnimatedCountState extends AnimatedWidgetBaseState<AnimatedCount> {
  IntTween _count;

  @override
  Widget build(BuildContext context) {
    return new Text(_count.evaluate(animation).toString());
  }

  @override
  void forEachTween(TweenVisitor visitor) {
    _count = visitor(
        _count, widget.count, (dynamic value) => new IntTween(begin: value));
  }
}
